<!--
 * @Date: 2023-02-23 10:33:22
 * @LastEditors: mengqingchen mengqc1995@163.com
 * @LastEditTime: 2023-03-01 11:39:56
 * @FilePath: \sososn-web-new\src\views\homePage\component\homeFoote.vue
-->
<template>
  <div
    class="group-5"
    :style="{ background: `url(${footerImg}) no-repeat`, 'background-size': '100% 100%' }"
  >
    <h2 class="group-title">1V1全程360°为客户服务</h2>

    <em class="phone_2"></em><span class="group-text">400-6565308</span>
    <div class="group-btn" @click="openDialog">免费体验</div>
  </div>
  <contact-dialog v-if="isContactShow" ref="contactRef" v-model="isContactShow" title="免费体验" />
</template>

<script setup>
const $getAssetsImages = inject('$getAssetsImages')
// const imgUrl = ref($getAssetsImages('home.png'))
const footerImg = ref($getAssetsImages('home-foote.png'))

let isContactShow = ref(false)
let contactRef = ref(null)

function openDialog() {
  isContactShow.value = true
  nextTick(() => {
    contactRef.value.dialogVisible = true
  })
}
</script>

<style lang="scss" scoped>
.group-5 {
  height: 236px;
  padding: 30px 791px 38px;
  background-image: url('../../../assets/images/home-foote.png');
  background-repeat: no-repeat;

  .group-title {
    margin-bottom: 30px;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-align: center;
  }

  .phone_2 {
    display: inline-block;
    margin-left: 72px;
  }

  .group-text {
    position: relative;
    top: -8px;
    margin-left: 14px;
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-size: 22px;
    font-weight: 500;
    color: #fff;
  }

  .group-btn {
    width: 137px;
    height: 42px;
    margin-top: 41px;
    margin-left: 97px;
    line-height: 42px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    border: 1px solid #fff;
    border-radius: 4px;
  }

  .group-btn:hover {
    color: #009cff;
    background: #fff;
  }
}
</style>
